<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伸缩菜单单页</title>
  <style>
    
    /* * {
      margin: 0;
      padding: 0;
    } */
    /* 去除默认的前面的黑点 */
    li{
        list-style: none;
    }

    /* 父容器div样式 */
    div {
      width: 500px;
      height: 300px;
      border: 1px solid #EEE;
      margin: 100px auto; /* 水平居中 */
    }

    /* ul 容器开启 Flex 布局 */
    /* 浏览器对 <ul> 默认会加上一段左侧 padding（大约 40px）
        和一些 margin，这会让你的 Flex 容器宽度超出父级 500px，导致 <li> 被“挤”到外面。 */
    div ul {
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      justify-content: space-around; /* 子元素均匀分布 */
    }

    /* li 元素样式 */
    div ul li {
      height: 40px;
      background-color: pink;
      flex: 1; /* 每个 li 平分父容器空间 */
      text-align: center; /* 文字水平居中 */
      line-height: 40px; /* 文字垂直居中（与 height 一致） */
      border-right: 1px solid #000; /* 右侧边框 */
    }

    /* 最后一个 li 清除右侧边框 */
    div ul li:last-child {
      border-right: none;
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li>首页</li>
      <li>商品分类</li>
      <li>我的订单</li>
      <li>最新商品</li>
      <li>联系我们</li>
    </ul>
  </div>
</body>
</html>